<template>
  <div class="page">
    <h2>注册</h2>
    <form @submit.prevent="handleRegister">
      <div class="input-group">
        <label for="username">账号:</label>
        <input
          type="text"
          id="username"
          v-model="username"
          placeholder="请输入账号"
          required
        />
      </div>
      <div class="input-group">
        <label for="password">密码:</label>
        <input
          type="password"
          id="password"
          v-model="password"
          placeholder="请输入密码"
          title="请输入密码"
          required
        />
      </div>
      <div class="input-group">
        <label for="confirm-password">确认密码:</label>
        <input
          type="password"
          id="confirm-password"
          v-model="confirmPassword"
          placeholder="请输入确认密码"
          title="请输入确认密码"
          required
        />
      </div>
      <div class="checkbox-group">
        <label>
          <input type="checkbox" v-model="agreeTerms" />
          同意<a href="#" @click.prevent="$emit('toggleForm', 'agreement')"
            >《服务协议》</a
          >及
          <a href="#" @click.prevent="$emit('toggleForm', 'privacyPolicy')"
            >《隐私政策》</a
          >
        </label>
      </div>
      <button type="submit" class="register-button">注册</button>
    </form>
    <div class="links" style="display: flex; justify-content: center">
      已有账号，立即
      <a href="#" @click.prevent="$emit('toggleForm', 'login')">登录</a>
    </div>
  </div>
</template>

<script>
import { registerApi } from "../api/user"; // 根据你的实际路径调整

export default {
  data() {
    return {
      username: "",
      password: "",
      confirmPassword: "",
      agreeTerms: false,
      isLoading: false, // 添加加载状态
      errorMessage: "", // 添加错误信息
    };
  },
  methods: {
    async handleRegister() {
      if (!this.validateForm()) return;

      this.isLoading = true;
      this.errorMessage = "";

      try {
        const response = await registerApi({
          username: this.username,
          password: this.password,
          confirmPassword: this.password,
        });

        console.log("respose", response)
        if (response.code === 200) {
          this.$message.success(response.msg || "注册成功");
          this.$emit("register-success", response.data);
          // 可选：自动跳转到登录
          this.$emit("toggleForm", "login");
        } else {
          //throw new Error(response.data.msg || "注册失败");
        }
      } catch (error) {
        // this.errorMessage =
        //   error.response?.msg || error.message || "注册失败，请稍后重试";
        // this.$message.error(this.errorMessage);
      } finally {
        this.isLoading = false;
      }
    },
    validateForm() {
      // 验证密码是否一致
      if (this.password !== this.confirmPassword) {
        this.errorMessage = "两次输入的密码不一致";
        this.$message.error(this.errorMessage);
        return false;
      }

      // 验证是否同意条款
      if (!this.agreeTerms) {
        this.errorMessage = "请同意服务协议和隐私政策";
        this.$message.error(this.errorMessage);
        return false;
      }

      // 其他验证逻辑...
      return true;
    },
  },
};
</script>
